<template>
  <div class="query-body">

    <el-row>
      <el-col :span="20">
        <div class="box">
          <div class="condition" v-for="e in items" :key="e.id">
            <span class="title">{{e.name}}</span>
            <el-input v-model="commonSearch[e.key]" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="oper">
          <el-button-group>
            <el-button  @click="query" type="primary" icon="el-icon-search" size="small">查询</el-button>
            <el-button  @click="reset" icon="el-icon-refresh-left" size="small">重置</el-button>
          </el-button-group>
          <div class="self-button">
            <slot></slot>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '@/api'

export default {
  name: 'query-condition',
  components: {
  },
  props: {
    // value: {
    //   type: Object // 传对象简单,不需要传额外的事件.只要指定对象value的key(valueKey)
    // },
    uri: {
      type: String
    },
    blockCode: {
      type: String
    }
  },
  data () {
    return {
      items: [],
      commonSearch: {}
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      api.sysSearch.conditionIems(this.uri).then(res => {
        console.log('xxxx', res)
        this.items = res
      })
    },
    query () {
      // console.log('xxxx')
      var commonCondition = {}
      var advanceCondition = {}

      var conditions = []

      var sorts = []
      var direction = []
      var blockCode = this.blockCode // 分组代号

      commonCondition.conditions = conditions
      var searchDTO = { commonCondition: commonCondition, advanceCondition: advanceCondition, sorts: sorts, direction: direction, blockCode: blockCode }
      this.items.forEach(e => {
        var condition = {}
        condition.name = e.key
        var value = this.commonSearch[e.key]
        if (value) {
          condition.value = value
        } else {
          condition.value = ''
        }
        conditions.push(condition)
      })
      this.$emit('query', searchDTO)
    },
    reset () {
      // console.log('xxxx')
      for (var key in this.commonSearch) {
        this.commonSearch[key] = ''
      }
    }
  },
  watch: {
  }
}
</script>

<style lang="scss" >
  .query-body {
    .box {
      display:flex;
      flex-wrap: wrap;
    }
    .el-input {
      width: 200px;
    }
    .title {
      display: inline-block;
      width: 80px;
      line-height:35px;
      text-align: right;
      padding-right: 5px;
    }
    .condition {
      flex: 1 1 auto;
    }
    .oper {
      padding-top: 5px;
      text-align: left;
      .self-button {
        display: inline-block;margin-left:10px
      }
    }
  }

</style>
